<template>


    <div v-loading="loading" style="width: 50%;margin-left: auto;margin-right: auto;">
        <el-carousel v-if="seckKillList.length > 0" height="auto"  arrow="none">
            <el-carousel-item  class="item" v-for="seckKill in seckKillList" :key="seckKill.id">
                <h3>{{ seckKill.name }}</h3>
                <span>{{ seckKill.title }}</span>
                <h1 class="price">${{ seckKill.price }}</h1>
                <div>库存：{{ seckKill.stock }}</div>
                <div>有效时长：{{ seckKill.validity }}天</div>
                <div>活动时间：{{ formatTime(seckKill.startTime) }} - {{ formatTime(seckKill.endTime) }}</div>
                <el-button @click="tryToSeckKill(seckKill.id)" :disabled="buttonDisable || seckKill.remainingTime > 0 || new Date(seckKill.endTime).getTime() < new Date().getTime()" style="margin-top: 20px;" type="primary" plain> {{seckKill.remainingTime > 0 ? '等待开始' : buttonDisable ? '抢购中...' : new Date(seckKill.endTime).getTime() < new Date().getTime() ? '已结束' : '立即秒杀'}} {{ seckKill.remainingTime > 0 ? '（'+formatRemainingTime(seckKill.remainingTime)+'）' : '' }}</el-button>
            </el-carousel-item>
        </el-carousel>
    </div>


    <el-dialog v-model="showSeckKillSuccess" width="30%" style="margin-top: 14%;border-radius: 20px;background-color: #312529;" draggable>
        <SeckKillSuccess />
    </el-dialog>


    <el-dialog v-model="showLoginView" width="800" style="height: 500px;border-radius: 20px;background: linear-gradient(to bottom, #fbf0f2 10%, #ffffff);color: black;" center>
        <template #header>
            <h2 style="margin-top: 0px;">登录</h2>
        </template>
        <LoginView></LoginView> 
    </el-dialog>
</template>

<script setup lang="ts">
    import request from '@/base/request';
    import SeckKill from '@/types/vip/SeckKill';
    import formatTime from '@/utils/formatTime';
    import { ElMessage } from 'element-plus';
    import { ref,onMounted,onUnmounted } from 'vue';
    import SeckKillSuccess from '@/components/music/seckKillSuccess.vue';
    import checkLogin from '@/utils/checkLogin';
    let timeTimer;
    const seckKillList = ref<SeckKill[]>([]);
    const showSeckKillSuccess = ref(false);
    const buttonDisable=ref(false);
    const loading=ref(false);
    const showLoginView=ref(false);

    const startTimer = () => {
        for(let i = 0;i < seckKillList.value.length;i++){
            seckKillList.value[i].remainingTime = Math.max(0,new Date(seckKillList.value[i].startTime).getTime()-new Date().getTime());
        }
        timeTimer = setInterval(() => {
            for(let i = 0;i < seckKillList.value.length;i++){
                seckKillList.value[i].remainingTime = Math.max(0,new Date(seckKillList.value[i].startTime).getTime()-new Date().getTime());
            }
        }, 1000);
    }

    const formatRemainingTime = (time:number) => {
        const hours = Math.floor(time / (1000 * 60 * 60));
        const minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((time % (1000 * 60)) / 1000);
        return `${hours>0?hours+'时':''}${minutes>0?minutes+'分':''}${seconds}秒`;
    }


    const getSeckKillList = async() => {
        loading.value=true;
        buttonDisable.value=true;
        try{
            const response = (await request.get('/trade/seckKill/getSeckKillList')).data;
            if(response.code == 200){
                seckKillList.value = response.data;
                clearInterval(timeTimer);
                startTimer();
            }else{
                ElMessage.error("加载失败");
                console.log(response.msg);
            }
        }finally{
            buttonDisable.value=false;
            loading.value=false;
        }
    }

    const tryToSeckKill = async(id:number) => {
        buttonDisable.value=true;
        try{
            const response = (await request.post(`/trade/seckKill/tryToSeckKill/${id}`)).data;
            if(response.code == 200){
                showSeckKillSuccess.value = true;
            }else{
                ElMessage.error(response.msg);
            }
        }finally{
            buttonDisable.value=false;
        }
    }

    onMounted(async() => {
        if(!checkLogin()){
            showLoginView.value=true;
        }else{
            getSeckKillList();
        }
    })


    onUnmounted(() => {
        clearInterval(timeTimer);
    })

</script>

<style scoped>
    h1{
        font-size: 30px;
    }

    .item{
        text-align: center;
        height: 360px;
        background-color: #222222;
        border-radius: 50px;
    }

    .item span{
        font-size: 16px;
        color: #b1b1b1;
        white-space: pre-line;
    }

    .price{
        font-size: 20px;
        color: #ff4d4d;
        font-weight: bold;
    }
</style>
